// 头部导航栏滚动事件
; (function () {
    const myHead = document.querySelector(".xtx_head").offsetTop
    const flayer = document.querySelector(".hide_father_layer")
    window.addEventListener('scroll', function () {
        if (document.documentElement.scrollTop >= myHead) {
            document.querySelector('.xtx_hide').style.top = 0
        } else {
            document.querySelector('.xtx_hide').style.top = "-80px"
            flayer.innerHTML = ``
        }
    })
}());

; (function () {
    const goodlist = ['首页', '居家', '美食', '服饰', '母婴', '个护', '严选', '数码', '运动', '杂项', "|", "品牌", '专题']
    const myHide = document.querySelector('.xtx_father_hide')
    myHide.innerHTML = `
   <!-- 隐藏头部 -->
   <div class="xtx_hide">
       <div class="w">
           <!-- log模块 -->
           <h1 class="xtx_log">
               <a href="#">
                   <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="">
               </a>
           </h1>
           <!-- 分类导航 -->
           <ul class="hide_nav">
               ${goodlist.map((item, index) => {
        return `
                <li>
                <a href="#" data-index="${index}">${item}</a>
               </li>`
    }).join('')}
           </ul>
       </div>
   </div>`
    document.querySelector('.xtx_hide .hide_nav li:nth-child(11)').innerHTML = `|`
    const newgoods = [
        {
            id: 0,
            list: ""
        },
        {
            id: 1,
            list: [{
                img: "https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView",
                title: "茶咖酒具"
            },
            {
                img: "https://yanxuan.nosdn.127.net/45b50d5f8afbd6fdef97314647dcb7db.png?quality=95&imageView",
                title: "水具杯壶"
            },
            {
                img: "https://yanxuan.nosdn.127.net/b42a85ef15f856081ea9f49e5f6893e2.png?quality=95&imageView",
                title: "宠物食品"
            },
            {
                img: "https://yanxuan.nosdn.127.net/e766b09029ca00680d1e651b5cdc42bd.png?quality=95&imageView",
                title: "宠物用品"
            }
            ]
        },
        {
            id: 2,
            list: [{
                img: "https://yanxuan.nosdn.127.net/79b904ccd106d3875a90d4430f2e8ad2.png?quality=95&imageView",
                title: "网易黑猪"
            },
            {
                img: "https://yanxuan.nosdn.127.net/cc361cf40d4f81c7eccefed1ad18face.png?quality=95&imageView",
                title: "水产海鲜"
            },
            {
                img: "https://yanxuan.nosdn.127.net/c11f5457dfb38e76f60100c87ecdf0cd.png?quality=95&imageView",
                title: "全球美食"
            },
            {
                img: "https://yanxuan.nosdn.127.net/fe8e9c985d538cc1c1ced011a67ffe69.png?quality=95&imageView",
                title: "冷冻冷藏"
            }
            ]
        },
        {
            id: 3,
            list: [{
                img: "https://yanxuan.nosdn.127.net/57e4f01648100ec94c7bfee35171fdcb.png?quality=95&imageView",
                title: "室外拖鞋"
            },
            {
                img: "https://yanxuan.nosdn.127.net/3f32a302a4cb4afe7d5d89b666566e60.png?quality=95&imageView",
                title: "春夏潮鞋"
            },
            {
                img: "https://yanxuan.nosdn.127.net/b9e005aef67f1a93828847b071114296.png?quality=95&imageView",
                title: "飞织系列"
            },
            {
                img: "https://yanxuan.nosdn.127.net/cc2470afdf28b9a84639703b592da6f7.png?quality=95&imageView",
                title: "一脚蹬懒人系列"
            }
            ]
        },
        {
            id: 4,
            list: [{
                img: "https://yanxuan.nosdn.127.net/1f0089afcec911db7202fbcdae57d5f8.png?quality=95&imageView",
                title: "T恤/polo/衬衫"
            },
            {
                img: "https://yanxuan.nosdn.127.net/bf9f0a32c2b79c6d29de7d0843888b48.png?quality=95&imageView",
                title: "卫衣/毛衫"
            },
            {
                img: "https://yanxuan.nosdn.127.net/8a4be0d65d4a2f3ba36b3af8ee8d9414.png?quality=95&imageView",
                title: "外套/套装"
            },
            {
                img: "https://yanxuan.nosdn.127.net/773677cc0922628152a9b3cbd862426f.png?quality=95&imageView",
                title: "连体衣/礼盒"
            }
            ]
        },
        {
            id: 5,
            list: [{
                img: "https://yanxuan.nosdn.127.net/718318c0d3b55d011fcb7c7c843902ce.png?quality=95&imageView",
                title: "家庭清洁"
            },
            {
                img: "https://yanxuan.nosdn.127.net/dfb6142de1bd2f59b251eb8f7c7ea2fb.png?quality=95&imageView",
                title: "浴室用品"
            },
            {
                img: "https://yanxuan.nosdn.127.net/55d927e337c1f6d394359e99ef72a621.png?quality=95&imageView",
                title: "餐厨清洁"
            },
            {
                img: "https://yanxuan.nosdn.127.net/949c5f8b077cf386ff9f1f18bec3408b.png?quality=95&imageView",
                title: "毛巾浴巾"
            }
            ]
        },
        {
            id: 6,
            list: [{
                img: "https://yanxuan.nosdn.127.net/00d79ce9acb7285b15f83c92940b557f.png?quality=95&imageView",
                title: "卫浴用品"
            },
            {
                img: "https://yanxuan.nosdn.127.net/b26d34d052d9c780d695bf4b601bfffc.png?quality=95&imageView",
                title: "高级珠宝"
            },
            {
                img: "https://yanxuan.nosdn.127.net/7daf27044470881e8839b46a262d958c.png?quality=95&imageView",
                title: "时尚配搭"
            },
            {
                img: "https://yanxuan.nosdn.127.net/c01b0f1075158c5a5eb1ff9a33347bb8.png?quality=95&imageView",
                title: "数码电器"
            }
            ]
        },
        {
            id: 7,
            list: [{
                img: "https://yanxuan.nosdn.127.net/f5797ca77cfe413e7753ec69f9bd4bb1.png?quality=95&imageView",
                title: "影音娱乐"
            },
            {
                img: "https://yanxuan.nosdn.127.net/da0ac345e98c04594b697b56ebc373a5.png?quality=95&imageView",
                title: "乐器"
            },
            {
                img: "https://yanxuan.nosdn.127.net/3f45fbcdac7e8532b6a1570e6d7fe171.png?quality=95&imageView",
                title: "车载用品"
            },
            {
                img: "https://yanxuan.nosdn.127.net/801583d2f58274b13dc6a03daed1c3c9.png?quality=95&imageView",
                title: "办公文具"
            }
            ]
        },
        {
            id: 8,
            list: [{
                img: "https://yanxuan.nosdn.127.net/2b1edfa6d05445de684b7df854895c0b.png?quality=95&imageView",
                title: "登机箱"
            },
            {
                img: "https://yanxuan.nosdn.127.net/cd44477ca9614ed81ffb58c5cacdab26.png?quality=95&imageView",
                title: "托运箱"
            },
            {
                img: "https://yanxuan.nosdn.127.net/141625f78404b8c81e431084a139b836.png?quality=95&imageView",
                title: "出行配件"
            },
            {
                img: "https://yanxuan.nosdn.127.net/c6ff77bbb7d0f39622da300f6f5f5442.png?quality=95&imageView",
                title: "户外运动鞋"
            }
            ]
        },
        {
            id: 9,
            list: [{
                img: "https://yanxuan.nosdn.127.net/da0ac345e98c04594b697b56ebc373a5.png?quality=95&imageView",
                title: "乐器杂项"
            }
            ]
        }
    ]
    const flayer = document.querySelector(".hide_father_layer")
    myHide.addEventListener("mouseover", function (e) {
        if (e.target.tagName === "A") {
            const newList = newgoods.filter(item => item.id !== 0)
            flayer.innerHTML = newList.map(item => {
                return `  <div class="hide_layer">
     <ul>
         ${item.list.map(item => {
                    return `<li>
         <a href="#">
             <img src="${item.img}"
                 alt="">
             <p>${item.title}</p>
         </a>
     </li>`
                }).join('')}
 </div>`
            }).join("")

            if (e.target.dataset.index === '1' || e.target.dataset.index === '2' || e.target.dataset.index === '3' || e.target.dataset.index === '4' || e.target.dataset.index === '5' || e.target.dataset.index === '6' || e.target.dataset.index === '7' || e.target.dataset.index === '8' || e.target.dataset.index === '9') {
                flayer.children[e.target.dataset.index - 1].style.display = "block"
            }
        }
        flayer.addEventListener('mouseleave', function () {
            flayer.innerHTML = ``
        })

    })
}());

// 分类导航隐藏模块显示
; (function () {
    const myLayer = document.querySelector(".xtx_head .xtx_mainNav .xtx_mainNav_layer")
    const myUl = document.querySelector(".xtx_head .xtx_mainNav .father_ul")
    const myHead = document.querySelector(".xtx_head")
    // 鼠标点击
    myUl.addEventListener("click", function (e) {
        if (e.target.tagName === 'A') {
            const myActive = document.querySelector(".xtx_head .xtx_mainNav li .active")
            if (myActive) {
                myActive.classList.remove('active')
            }
            e.target.classList.add('active')
        }
    })
    // 鼠标经过
    myUl.addEventListener("mouseover", function (e) {
        if (e.target.tagName === 'A') {
            const myOpen = document.querySelector('.xtx_head .xtx_mainNav li .open')
            if (myOpen) {
                myOpen.classList.remove("open")
            }
            e.target.nextElementSibling.classList.add("open")
        }
    })
    // 鼠标移出
    myLayer.addEventListener("mouseleave", function (e) {
        const myOpen = document.querySelector('.xtx_head .xtx_mainNav li .open')
        if (myOpen) {
            myOpen.classList.remove("open")
        }
    })
    myHead.addEventListener("mouseleave", function (e) {
        const myOpen = document.querySelector('.xtx_head .xtx_mainNav li .open')
        if (myOpen) {
            myOpen.classList.remove("open")
        }
    })
}());

// 轮播图效果
; (function () {
    const bannerData = [{
        src: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg"
    },
    {
        src: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
    },
    {
        src: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg"
    },
    {
        src: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg"
    },
    {
        src: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg"
    }]
    const xtxBanner = document.querySelector(".xtx_sort .xtx_banner")
    const bannerImg = document.querySelector(".xtx_sort .xtx_banner .banner_li img")
    const indicatorSpans = document.querySelectorAll(".xtx_sort .xtx_banner .banner_indicator span")
    const leftBtn = document.querySelector(".xtx_sort .xtx_banner .left_btn")
    const rightBtn = document.querySelector(".xtx_sort .xtx_banner .right_btn")
    // 封装函数
    function bannerUpdate() {
        bannerImg.src = bannerData[index].src
        document.querySelector(".xtx_sort .banner_body .banner_indicator .active").classList.remove("active")
        indicatorSpans[index].classList.add('active')
    }
    let index = 0
    //  开启定时器
    let timer = setInterval(function () {
        index++
        if (index >= bannerData.length) index = 0
        bannerUpdate()
    }, 2000)
    // 鼠标经过暂停
    xtxBanner.addEventListener("mouseenter", function () {
        clearInterval(timer)
        leftBtn.style.opacity = "1"
        rightBtn.style.opacity = "1"
    })
    // 鼠标离开自动开启定时器
    xtxBanner.addEventListener("mouseleave", function () {
        timer = setInterval(function () {
            index++
            if (index >= bannerData.length) index = 0
            bannerUpdate()
        }, 2000)
        leftBtn.style.opacity = "0"
        rightBtn.style.opacity = "0"
    })
    // 鼠标监听上一个
    leftBtn.addEventListener("click", function () {
        index--
        if (index < 0) index = bannerData.length - 1
        bannerUpdate()
    })
    // 鼠标监听下一个
    rightBtn.addEventListener("click", function () {
        index++
        if (index >= bannerData.length) index = 0
        bannerUpdate()
    })
}());

// 左侧导航渲染
; (function () {
    let goodslist = [
        {
            name_a: '居家',
            name_b: '茶咖酒具',
            name_c: '水晶茶杯'
        },
        {
            name_a: '美食',
            name_b: '网易黑猪',
            name_c: '水产海鲜'
        },
        {
            name_a: '服饰',
            name_b: '室外拖鞋',
            name_c: '春夏潮鞋'
        },
        {
            name_a: '母婴',
            name_b: 'T恤/polo/衬衫',
            name_c: '卫衣/毛衫'
        },
        {
            name_a: '个护',
            name_b: '家庭清洁',
            name_c: '浴室用品'
        },
        {
            name_a: '严选',
            name_b: '卫浴用品',
            name_c: '高级珠宝'
        },
        {
            name_a: '数码',
            name_b: '影音娱乐',
            name_c: '乐器'
        },
        {
            name_a: '运动',
            name_b: '登机箱',
            name_c: '托运箱'
        },
        {
            name_a: '杂项',
            name_b: '乐器杂项',
            name_c: ''
        },
        {
            name_a: '品牌',
            name_b: '茶品牌推荐',
            name_c: ''
        },
    ]
    const myUl = document.querySelector('.nav_ul')
    myUl.innerHTML = goodslist.map((item, index) => {
        return `<li class="nav_li" data-index="${index}">
        <a href="file:///C:/Users/86133/Desktop/%E4%B8%89%E4%BA%BA%E5%90%88%E6%88%90/classification.html">${item.name_a}</a>
        <a href="file:///C:/Users/86133/Desktop/%E4%B8%89%E4%BA%BA%E5%90%88%E6%88%90/classification.html">${item.name_b}</a>
        <a href="file:///C:/Users/86133/Desktop/%E4%B8%89%E4%BA%BA%E5%90%88%E6%88%90/classification.html">${item.name_c}</a>
        <a href="file:///C:/Users/86133/Desktop/%E4%B8%89%E4%BA%BA%E5%90%88%E6%88%90/classification.html"> <div class="xtx_nav_box"></div></a>
    </li>`
    }).join('')
}());
; (function () {
    let goodlist = [
        {
            id: 0,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png',
                    uname1: '圆润大肚流线型耐热玻璃凉水壶',
                    uname2: '1.25L容量，耐冷耐热，通透好用',
                    uname3: '698.00'
                },

            ]
        },
        {
            id: 2,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/ded4b153a0878527dcee27981c389929.png',
                    uname1: '两带式软木拖鞋',
                    uname2: '鞋杯随脚型而变，舒适呵护',
                    uname3: '55.90'

                }
            ]
        },
        {
            id: 1,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [{
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg',
                uname1: '网易味央黑猪肉银卡（双月赏味）',
                uname2: '安心好肉双月赏味',
                uname3: '79.00'
            },

            ]
        },
        {
            id: 3,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [{
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/20f8dab8d20226666c3b07a05fdea2d9.jpg',
                uname1: '儿童防污/防蚊T恤110cm',
                uname2: '两款防污，两款防蚊',
                uname3: '79.00'
            }]

        },
        {
            id: 4,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
                    uname1: '【新疆棉】宝宝也能用，全棉华夫格毛巾',
                    uname2: '空气华夫格，自然新疆棉',
                    uname3: '19.00'
                }
            ]
        },
        {
            id: 5,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },
                {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                }, {
                    img: 'https://yanxuan-item.nosdn.127.net/0d60499ef9d5629c5913398477374763.png',
                    uname1: '意大利制造双面拼色毛衣2色可选',
                    uname2: '意大利gucci纱线原创设计',
                    uname3: '999.00'
                },

            ]
        },
        {
            id: 6,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [{
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/9382826c5a4bf31d7d1c827fec50e05b.png',
                uname1: '拉开抽屉不凌乱，磨砂抽屉整理盒套装',
                uname2: '灵活组合，多场景适用',
                uname3: '79.00'
            },]
        },
        {
            id: 7,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [{
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b697f27edef08eb9f1b143f76dcd0551.png',
                uname1: '日式多功能颈枕舒滑款',
                uname2: '0.5mm微粒子，多重呵护颈椎',
                uname3: '69.00'
            },]
        },
        {
            id: 8,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [{
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            }, {
                img: 'https://yanxuan-item.nosdn.127.net/b87fbe8018cda626881da82851df5cca.png',
                uname1: '儿童智能电子琴',
                uname2: '宝宝的随身钢琴老师',
                uname3: '1699.00'
            },]
        },
        {
            id: 9,
            a: '分类推荐',
            c: '根据您的购买获浏览记录推荐',
            b: [
                {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                }, {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                }, {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                }, {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                }, {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                }, {
                    img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
                    uname1: '中国江苏传智',
                    uname2: '华硕品质',
                    uname3: '游戏专用'
                },
            ]
        }
    ]
    const myLayer = document.querySelector(".nav_father_layer")
    const myUl = document.querySelector(".nav_ul")
    myUl.addEventListener('mouseover', function (e) {
        let temp = +e.target.parentNode.dataset.index
        const arr = goodlist.filter(item => item.id === temp)
        myLayer.innerHTML = arr.map(item => {
            return `<div class="nav_layer">
            <div class="layer_top">
                <h4>${item.a} </h4>
                <span>${item.c}</span>
            </div>
            <ul class="layer_footer">
                ${item.b.map(item => {
                return `<a href="#">
                    <li>
                        <img src="${item.img}"
                            alt="">
                        <div class="goods_info">
                            <h4 class="goods_name">${item.uname1}</h4>
                            <p class="goods_desc one_line">${item.uname2}/p>
                            <p class="goods_price">¥<i>${item.uname3}</i></p>
                        </div>
                    </li>
                </a>`
            }).join('')}
            </ul>
        </div>`
        }).join('')
        myLayer.style.display = "block"
    })
    document.querySelector(".xtx_sort .w").addEventListener('mouseleave', function () {
        myLayer.style.display = "none"
    })
}());

// 新鲜好物及人气推荐渲染
; (function () {
    let goodlist = [
        {
            id: 1,
            a: '新鲜好物',
            b: '新鲜出炉 品质靠谱',
            c: '查看全部',
            d: [{
                img: 'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg',
                uname_a: '智能温控细嘴流速刚刚好咖啡手冲壶电热水壶',
                uname_b: '389.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/c9f3dc9792ce78a215d9ea9c14f9aad8.jpg',
                uname_a: '国家非遗木叶盏，经典木叶茶具套装',
                uname_b: '179.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/43261ae2406e3d620deb42e32c7a54ed.png',
                uname_a: '男式头层牛皮软底豆豆鞋',
                uname_b: '248.00'
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/3f7e7462543d5f44302cc6de5599fa09.jpg',
                uname_a: '地表强温，小恐龙儿童加厚羽绒服110-170cm',
                uname_b: '399.00'
            }]
        },
        {
            id: 2,
            a: '人气推荐',
            b: '人气爆款 不容错过',
            c: '',
            d: [{
                img: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg',
                uname_a: '特惠推荐',
                uname_b: '它们最实惠'
            },
            {
                img: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_2.jpg',
                uname_a: '爆款推荐',
                uname_b: '它们最受欢迎'
            },
            {
                img: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg',
                uname_a: '一站买全',
                uname_b: '使用场景下精心优选'
            },
            {
                img: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_4.jpg',
                uname_a: '领券中心',
                uname_b: '更多超值优惠券'
            }]
        },
        {
            id: 3,
            a: '热门品牌',
            b: '国际经典 品质保证',
            c: '',
            d: [{
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/a25d210a-cf3d-49f5-9006-5c1e7c563bb9.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b5fd7624-1d1e-4ed9-b739-a8f44f2d08fc.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/fdbc5113-dcca-4b7f-b1d6-c51faf8e3de9.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/cc95ddbf-f2f8-4c48-9845-0c5364557198.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/cdeaf7eb-a68f-485c-9fc3-82358ebed83b.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/bb0411c8-0407-460b-9db2-e1ca377d7227.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/7f6a7b20-7902-4b43-b9c5-f33151ef1334.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/4f998a72-6c37-44fc-bb28-c017541868e8.jpg',
            },
            {
                img: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/07b52b63-d128-491f-b55e-ad9192a6baeb.jpg',
            }]
        },
        {
            id: 4,
            a: '居家',
            b: [{
                desc1: "茶咖酒具",
                desc2: "水具杯壶",
                desc3: "宠物食品",
                desc4: "宠物用品"
            }],
            c: '查看全部',
            d: "https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/home_goods_cover.jpg",
            e: [{
                img: 'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg',
                uname_a: '智能温控细嘴流速刚刚好咖啡手冲壶电热水壶',
                uname_b: '智能温控出水流畅，容易操控',
                uname_c: "389.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
                uname_a: '手工吹制更厚实白酒杯壶套装6壶6杯',
                uname_b: '抿一口好酒，喝出真性情',
                uname_c: "99.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
                uname_a: '与众不同的口感汝瓷白酒杯套组1壶4杯',
                uname_b: '白酒的最佳搭档，席间一道风景——汝瓷白酒套组',
                uname_c: "108.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
                uname_a: '梨皮朱泥三绝清代小品壶经典款紫砂壶',
                uname_b: '风靡南国的朱泥小壶，茶座上必备的实用“奢侈品”',
                uname_c: "780.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/c9f3dc9792ce78a215d9ea9c14f9aad8.jpg',
                uname_a: '国家非遗木叶盏，经典木叶茶具套装',
                uname_b: '千载传承，植物与陶瓷的巧妙结合',
                uname_c: "179.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
                uname_a: '青春系列茶水分离杯带锁仓保温杯',
                uname_b: '随时随地，尽情享用',
                uname_c: "75.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/c848105807f4a14c0048f4cda749eb55.jpg',
                uname_a: '朱炳仁铜壶·珐琅釉彩绝技手造抑菌铜壶',
                uname_b: '乾隆御用铜,欧盟标抑菌,煮水若山泉',
                uname_c: "999.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/15a03f816ca939530b1fcf9c1e61ebaf.png',
                uname_a: '青石花梨纵享茶道精制花梨木茶盘茶台',
                uname_b: '茶可行道，茶可压制；花梨木茶盘，尽享茶道空间。',
                uname_c: "498.00"
            }
            ]
        },
        {
            id: 5,
            a: '美食',
            b: [{
                desc1: "网易黑猪",
                desc2: "水产海鲜",
                desc3: "全球美食",
                desc4: "冷冻冷藏"
            }],
            c: '查看全部',
            d: "https://yanxuan-item.nosdn.127.net/01227c93e9098342be591ea57b8953c7.jpg?quality=95&thumbnail=610x610&imageView",
            e: [{
                img: 'https://yanxuan-item.nosdn.127.net/17d32665d53e351aa499fb1e56796e58.jpg',
                uname_a: '鲜活捕捞，爽口鱿鱼须250g*1包（约15g/根）',
                uname_b: '鲜甜海味，低脂低热量',
                uname_c: "19.90"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/6d8de4504bdb9c1ad263e6b5b9a18ab2.jpg',
                uname_a: '免浆黑鱼片，酸菜鱼350g',
                uname_b: '酸中带辣，开胃爽口酸菜鱼',
                uname_c: "15.80"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/c28641dbf14645f518ee01df668daca7.png',
                uname_a: '酸爽酸菜鱼，麻香藤椒虾手工水饺360g',
                uname_b: '严选食材，汤汁浓郁，两种口味吃不够',
                uname_c: "19.90"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/39d1f00e557fbb44862dc5cbffe9ad09.png',
                uname_a: '加热速食，手工包制早餐包',
                uname_b: '可口多汁，快捷早餐佳选',
                uname_c: "26.80"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/fa1302d4b51225df3a59727c705508de.jpg',
                uname_a: '双味千层，美味随时享，手抓饼烤肉组合',
                uname_b: '有饼有肉，喷香美味随时享',
                uname_c: "9.90"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/1fc52697692d2ec4f6b6175e3de2a605.jpg',
                uname_a: '加热即食，云南甘蔗慢熬红糖馒头',
                uname_b: '层层分明，松软可口',
                uname_c: "18.80"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/0d0cd4fc226d0daf834f55586a057e7e.jpg',
                uname_a: '舟山特色，即食野生小海鲜',
                uname_b: '每日现做，弹滑鲜香',
                uname_c: "26.80"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/16e0f76367c3184ef64431a5676e69c0.png',
                uname_a: '可以喝的水果面膜韩国蜂蜜柚子茶560克',
                uname_b: '维C满满，营养丰富',
                uname_c: "35.00"
            }
            ]
        },
        {
            id: 6,
            a: '服饰',
            b: [{
                desc1: "室外拖鞋",
                desc2: "春夏潮鞋",
                desc3: "飞织系列",
                desc4: "一脚蹬懒人系列"
            }],
            c: '查看全部',
            d: "https://yanxuan-item.nosdn.127.net/d0176b163973961ed01818d04ee94a06.png?quality=95&thumbnail=610x610&imageView",
            e: [{
                img: 'https://yanxuan-item.nosdn.127.net/43261ae2406e3d620deb42e32c7a54ed.png',
                uname_a: '男式头层牛皮软底豆豆鞋',
                uname_b: '舒适生活，悦享品质',
                uname_c: "248.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/d5b7af02c7a2cf3966385d6565a2501d.png',
                uname_a: '深船型两带式可外穿软弹拖鞋',
                uname_b: '软弹如云朵般，开天窗版透气',
                uname_c: "27.50"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/a4cd3263546e2d384fd549cda9a0761e.png',
                uname_a: '简约真皮交叉带女式平底拖鞋',
                uname_b: '给你的jio泡芙包裹的温柔感',
                uname_c: "229.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/f5c2bd141d6640123532410bea6aecc2.png',
                uname_a: '可机洗系列-女式尖头平底鞋',
                uname_b: '解放双手，随盒赠送洗鞋袋',
                uname_c: "179.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/95466ac4e510c1ea4bceed80e5462e8f.png',
                uname_a: '子安推荐女式半透明夜光飞织运动鞋',
                uname_b: '潮流炫酷反光，仿似耀眼星光',
                uname_c: "349.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/5c2abad66d86250b6c85c74ffd0ecc2d.png',
                uname_a: '玩趣彩虹四季拖鞋2.0',
                uname_b: '14种颜色可选，柔软好心情',
                uname_c: "21.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/27199cc003c5237eb72d235c2281482d.png',
                uname_a: '男女同款情侣抗菌夜视休闲跑鞋',
                uname_b: '夜视反光，抗菌鞋垫，针织鞋面改善弹力',
                uname_c: "149.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/efcbdbe9a56035d74cb3f48a0c5e8e87.png',
                uname_a: '男女同款情侣立体飞织爆米花运动鞋',
                uname_b: '舒适自在帅性出街',
                uname_c: "208.00"
            }
            ]
        },
        {
            id: 7,
            a: '母婴',
            b: [{
                desc1: "T恤/polo/衬衫",
                desc2: "卫衣/毛衫",
                desc3: "外套/套装",
                desc4: "连体衣/礼盒"
            }],
            c: '查看全部',
            d: "https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/kitchen_goods_cover.jpg",
            e: [{
                img: 'https://yanxuan-item.nosdn.127.net/3cb61b3fd4761555e56c4a5f19d1b4b1.png',
                uname_a: '“柿柿”如意，新年夹棉连体衣/棉服0-5岁',
                uname_b: '三层锁温舒适，仿丝绵加倍保暖',
                uname_c: "159.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/3f7e7462543d5f44302cc6de5599fa09.jpg',
                uname_a: '地表强温，小恐龙儿童加厚羽绒服110-170cm',
                uname_b: '如行走的羽绒被，打雪仗也无所畏惧',
                uname_c: "399.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/07dee4b72938cb420234a0535ae1643d.png',
                uname_a: '时尚百搭，儿童雪尼尔毛衣3-9岁',
                uname_b: '柔软舒适毛衣，秋冬常备单品',
                uname_c: "109.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/21d2e9b754487aa3030ce105493a9473.jpg',
                uname_a: '加绒加厚，儿童保暖时尚卫衣套装73-120cm',
                uname_b: '舒棉绒内里，抵御寒冬',
                uname_c: "199.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg',
                uname_a: '毛茸茸暖意，儿童羊羔绒外套73-120cm',
                uname_b: '宽松版型，搭出休闲风格',
                uname_c: "99.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/5be7e8d6177ef0d2755a5d8887e1e475.png',
                uname_a: '温暖拥抱新生，婴童杜邦棉爬服0-3岁',
                uname_b: '杜邦科技棉填充，保暖舒适',
                uname_c: "129.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/3c7bb260414b7913dc07813d2ba0f40b.png',
                uname_a: '95%白鸭绒，儿童厚款面包羽绒服110-140cm',
                uname_b: '三层结构防跑绒，鸭绒轻便保暖',
                uname_c: "439.00"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
                uname_a: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm',
                uname_b: '连帽熊耳设计，萌化少女心',
                uname_c: "79.00"
            }
            ]
        },
        {
            id: 8,
            a: '最新专题',
            b: "",
            c: '查看全部',
            d: [{
                img: 'https://yanxuan-item.nosdn.127.net/3d22e25419075b4734d35c4bcbe58a0d.jpg',
                uname_a: '儿童3D/平面口罩 30枚',
                uname_b: '说是儿童口罩但很大，不适合低龄儿童使用',
                uname_c: "49",
                uname_d: "9678",
                uname_e: "9674"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/8de8a723b44b36e2d7672387287a3e43.jpg',
                uname_a: '地表强温 男式鹅绒毛领经典派克宽松羽绒服',
                uname_b: '很好，很暖和(｡･ω･｡)！',
                uname_c: "1299",
                uname_d: "5904",
                uname_e: "5902"
            },
            {
                img: 'https://yanxuan-item.nosdn.127.net/bbc7f32127fc8e99ed88fa2710d20722.png',
                uname_a: '煎炸蒸煮 日式双耳多用锅 小煎锅寿喜烧',
                uname_b: '寿喜锅、煲仔砂陶碗以及石锅多项功能于一身的多用型选手~简即繁，外形设计较日式，更加偏向于制作寿喜烧那种菜肴的铸铁锅多一点，再加上六层压铸技术，所以还没收到的时候以为会很重，结果超轻！包装精简，女生也能美美使用~拿到锅的第一件事情必然是开锅~开锅不繁琐，效益享万年～底部也用心地印上了胖选独有的logo~熠熠生辉~严选控一本满足！锅体受热很快，较普通锑锅相比受热更加均匀，几乎同等的水能优先烧开，媲美小巧的雪平锅，但容量规格又秒杀雪平锅~锅盖两个出气的设计很好地避免了凑上去观看内部蒸煮情况时被蒸汽误伤的情形，对了！贴心地设计了两个隔热小把手套，我宣布~这多功能锅，现在就是我宝贝里面第一心头好！！！',
                uname_c: "149",
                uname_d: "133",
                uname_e: "130"
            }
            ]
        }
    ]
    document.querySelector(".xtx_father_template").innerHTML = goodlist.map(item => {
        if (item.id === 1) {
            return `
        <!-- 新鲜好物 -->
        <div class="xtx_new_goods">
        <div class="w">
        <!-- 头部 -->
            <div class="goods_head data_head">
                <h3 class="data_title">
                    ${item.a}
                    <b class="data_desc">${item.b}</b>
                </h3>
                <a href="#" class="xtx_more">
                    ${item.c}
                    <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
                </a>
            </div>
         <!-- 商品列表 -->
            <ul class="goods_list data_list">
                ${item.d.map(item => {
                return `<li>
                    <a href="details.html" class="data_more">
                    <img src=${item.img}
                        class="data_img" alt="">
                    <p class="one_line data_name">${item.uname_a}</p>
                    <p class="new_price data_name">¥${item.uname_b}</p>
                </a>
            </li>`
            }).join('')}
            </ul>
        </div>
    </div>`}
        if (item.id === 2) {
            return `  
            <!-- 人气推荐 -->
            <div class="xtx_popular">
            <div class="w">
            <!-- 头部 -->
                <div class="popular_head data_head">
                    <h3 class="data_title">
                    ${item.a}
                        <b class="data_desc">${item.b}</b>
                    </h3>
                </div>
            <!-- 商品列表 -->
                <ul class="popular_list data_list">
                ${item.d.map(item => {
                return `                    <li>
                    <a href="#" class="data_more">
                        <img src=${item.img}
                            class="data_img" alt="">
                        <p class="data_name">${item.uname_a}</p>
                        <p class="popular_price data_name">${item.uname_b}</p>
                    </a>
                </li>`
            }).join("")}
                </ul>
            </div>
        </div>`
        }
        if (item.id === 3) {
            return `
            <!-- 热门品牌 -->
            <div class="xtx_hot">
            <div class="w">
                <!-- 头部 -->
                <div class="hot_head data_head">
                    <h3 class="data_title">
                        ${item.a}
                        <b class="data_desc">${item.b}</b>
                    </h3>
                    <div class="page">
                        <button class="prev page_done iconfont icon-chevron-left-copy" disabled></button>
                        <button class="next page_color iconfont icon-chevron-right-copy"></button>
                    </div>
                </div>
                <!-- 商品列表 -->
                <ul class="hot_list">
                  ${item.d.map(item => {
                return `
                    <li>
                    <a href="#">
                        <img src=${item.img}
                            alt="">
                    </a>
                </li>`
            }).join("")}
                </ul>
            </div>
        </div>`
        }
        if (item.id === 4) {
            return ` 
            <!-- 居家模块 -->
            <div class="xtx_home_products">
                <div class="w">
                    <!-- 头部 -->
                    <div class="home_head data_head">
                        <h3 class="data_title ">${item.a}</h3>
                        <div class="home_bar">
                         ${item.b.map(item => {
                return `
                            <a href="#" class="data_home_name">${item.desc1}</a>
                            <a href="#" class="data_home_name">${item.desc2}</a>
                            <a href="#" class="data_home_name">${item.desc3}</a>
                            <a href="#" class="data_home_name">${item.desc4}</a>`
            }).join('')}                         
                        </div>
                        <a href="#" class="xtx_more">
                            ${item.c}
                            <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
                        </a>
                    </div>
                    <!-- 商品列表 -->
                    <div class="data_show">
                        <a href="#" class="data_cover">
                            <img src=${item.d}
                                class="show_pic" alt="">
                            <b class="show_lable">
                                <span>${item.a}馆</span>
                                <span>大额优惠
                                    等你来拿</span>
                            </b>
                        </a>
                        <ul class="show_list">
                          ${item.e.map(item => {
                return `
                            <li class="data_myli">
                            <div class="data_item">
                                <a href="#" class="data_image">
                                    <img src=${item.img}
                                        class="data_img" alt="">
                                </a>
                                <p class="show_name two_line">${item.uname_a}</p>
                                <p class="show_desc one_line">${item.uname_b}</p>
                                <p class="show_price">¥${item.uname_c}</p>
                                <div class="list_layer">
                                    <a href="#">
                                        <span class="data_find">找相似</span>
                                        <span class="data_find">发现更多宝贝</span>
                                    </a>
                                </div>
                            </div>
                        </li>`
            }).join("")}
                        </ul>
                    </div>
                </div>
            </div>`
        }
        if (item.id === 5) {
            return `
    <!-- 美食模块 -->
    <div class="xtx_home_products">
        <div class="w">
            <!-- 头部 -->
            <div class="home_head data_head">
                <h3 class="data_title ">${item.a}</h3>
                <div class="home_bar">
                ${item.b.map(item => {
                return `
                    <a href="#" class="data_home_name">${item.desc1}</a>
                    <a href="#" class="data_home_name">${item.desc2}</a>
                    <a href="#" class="data_home_name">${item.desc3}</a>
                    <a href="#" class="data_home_name">${item.desc4}</a>`
            }).join('')}
                    
                </div>
                <a href="#" class="xtx_more">
                    ${item.c}
                    <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
                </a>
            </div>
            <!-- 商品列表 -->
            <div class="data_show">
                <a href="#" class="data_cover">
                    <img src=${item.d}
                        class="show_pic" alt="">
                    <b class="show_lable">
                        <span>${item.a}馆</span>
                        <span>大额优惠
                            等你来拿</span>
                    </b>
                </a>
                <ul class="show_list">
                   ${item.e.map(item => {
                return `
                    <li class="data_myli">
                    <div class="data_item">
                        <a href="#" class="data_image">
                            <img src=${item.img}
                                class="data_img" alt="">
                        </a>
                        <p class="show_name two_line">${item.uname_a}</p>
                        <p class="show_desc one_line">${item.uname_b}</p>
                        <p class="show_price">¥${item.uname_c}</p>
                        <div class="list_layer">
                            <a href="#">
                                <span class="data_find">找相似</span>
                                <span class="data_find">发现更多宝贝</span>
                            </a>
                        </div>
                    </div>
                </li>`
            }).join("")}
                </ul>
            </div>
        </div>
    </div>`
        }
        if (item.id === 6) {
            return `<!-- 服饰模块 -->
    <div class="xtx_home_products">
        <div class="w">
            <!-- 头部 -->
            <div class="home_head data_head">
                <h3 class="data_title ">${item.a}</h3>
                <div class="home_bar">
                 ${item.b.map(item => {
                return ` <a href="#" class="data_home_name">${item.desc1}</a>
                    <a href="#" class="data_home_name">${item.desc2}</a>
                    <a href="#" class="data_home_name">${item.desc3}</a>
                    <a href="#" class="data_home_name">${item.desc4}</a>`
            })}
                </div>
                <a href="#" class="xtx_more">
                   ${item.c}
                    <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
                </a>
            </div>
            <!-- 商品列表 -->
            <div class="data_show">
                <a href="#" class="data_cover">
                    <img src=${item.d}
                        class="show_pic" alt="">
                    <b class="show_lable">
                        <span>${item.a}馆</span>
                        <span>大额优惠
                            等你来拿</span>
                    </b>
                </a>
                <ul class="show_list">
                  ${item.e.map(item => {
                return `  <li class="data_myli">
                    <div class="data_item">
                        <a href="#" class="data_image">
                            <img src=${item.img}
                                class="data_img" alt="">
                        </a>
                        <p class="show_name two_line">${item.uname_a}</p>
                        <p class="show_desc one_line">${item.uname_b}</p>
                        <p class="show_price">¥${item.uname_c}</p>
                        <div class="list_layer">
                            <a href="#">
                                <span class="data_find">找相似</span>
                                <span class="data_find">发现更多宝贝</span>
                            </a>
                        </div>
                    </div>
                </li>`
            })}
                </ul>
            </div>
        </div>
    </div>`
        }
        if (item.id === 7) {
            return `
    <div class="xtx_home_products">
    <div class="w">
        <!-- 头部 -->
        <div class="home_head data_head">
            <h3 class="data_title ">${item.a}</h3>
            <div class="home_bar">
               ${item.b.map(item => {
                return `
                <a href="#" class="data_home_name">${item.desc1}</a>
                <a href="#" class="data_home_name">${item.desc2}</a>
                <a href="#" class="data_home_name">${item.desc3}</a>
                <a href="#" class="data_home_name">${item.desc4}</a>`
            }).join("")}
            </div>
            <a href="#" class="xtx_more">
                ${item.c}
                <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
            </a>
        </div>
        <!-- 商品列表 -->
        <div class="data_show">
            <a href="#" class="data_cover">
                <img src=${item.d}
                    class="show_pic" alt="">
                <b class="show_lable">
                    <span>${item.a}馆</span>
                    <span>大额优惠
                        等你来拿</span>
                </b>
            </a>
            <ul class="show_list">
             ${item.e.map(item => {
                return `  <li class="data_myli">
                <div class="data_item">
                    <a href="#" class="data_image">
                        <img src=${item.img}
                            class="data_img" alt="">
                    </a>
                    <p class="show_name two_line">${item.uname_a}</p>
                    <p class="show_desc one_line">${item.uname_b}</p>
                    <p class="show_price">¥${item.uname_c}</p>
                    <div class="list_layer">
                        <a href="#">
                            <span class="data_find">找相似</span>
                            <span class="data_find">发现更多宝贝</span>
                        </a>
                    </div>
                </div>
            </li>`
            }).join("")}
            </ul>
        </div>
    </div>
</div>`
        }
        if (item.id === 8) {
            return `
    <div class="xtx_special_topic">
        <div class="w">
            <!-- 头部 -->
            <div class="goods_head data_head">
                <h3 class="data_title">
                    ${item.a}
                </h3>
                <a href="#" class="xtx_more">
                    ${item.c}
                    <i class="xtx_more_icon iconfont icon-chevron-right-copy"></i>
                </a>
            </div>
            <!-- 专题列表 -->
            <ul class="topic_list">
               ${item.d.map(item => {
                return `
                <li class="list_item">
                <a href="#">
                    <img src=${item.img} alt="">
                    <div class="list_desc">
                        <p class="list_title">
                            <span class="title_name one_line">${item.uname_a}</span>
                            <span class="title_desc one_line">${item.uname_b}</span>
                        </p> 
                        <span class="list_price">¥${item.uname_c}起</span>
                    </div>
                </a>
                <div class="list_footer clearfix">
                    <span class="list_like fl">
                        <i class="iconfont icon-aixin"></i>
                        ${item.uname_d}
                    </span>
                    <span class="list_like fl">
                        <i class="iconfont icon-yanjing"></i>
                        ${item.uname_e}
                    </span>
                    <span class="list_comment fr">
                        <i class="iconfont icon-pingjia"></i>
                        ${item.uname_e}
                    </span>
                </div>
            </li>`
            }).join('')}
            </ul>
        </div>
    </div>`
        }
    }).join("")
}());

// 热门品牌实现tab栏切换
; (function () {
    const prveBtn = document.querySelector(".xtx_hot .hot_head .page .prev")
    const nextBtn = document.querySelector(".xtx_hot .hot_head .page .next")
    const myPage = document.querySelector(".xtx_hot .hot_head .page")
    const myList = document.querySelector(".xtx_hot .hot_list")
    // 事件委托
    myPage.addEventListener("click", function (e) {
        if (e.target.tagName === "BUTTON") {
            const myDone = document.querySelector(".xtx_hot .hot_head .page .page_done")
            if (myDone) myDone.classList.remove("page_done")
            if (e.target === nextBtn) {
                e.target.classList.add('page_done')
                e.target.classList.remove("page_color")
                e.target.disabled = true
                prveBtn.classList.add("page_color")
                prveBtn.disabled = false
                myList.style.transform = "translateX(-1240px)"
            }
            if (e.target === prveBtn) {
                e.target.classList.add('page_done')
                e.target.classList.remove("page_color")
                e.target.disabled = true
                nextBtn.classList.add("page_color")
                nextBtn.disabled = false
                myList.style.transform = "translateX(0px)"
            }
        }
    })
}());


